<template>
  <div class="category">
    <dl class="m-categroy">
      <dt>按拼音首字母选择：</dt>
      <dd v-for="(item, index) in list" :key="index">
        <a :href="'#city-' + item">{{ item }}</a>
      </dd>
    </dl>
    <dl
      class="m-categroy-section"
      v-for="(item, index) in objcity"
      :key="index"
      :id="'city-' + index"
    >
      <dt>{{ index }}</dt>
      <dd>
        <span v-for="city in item" :key="city.id">{{ city.name }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: "ABCDEFGHIJKMNOPQRSTUVWSYZ".split("")
    };
  },
  created() {
    var data = [
      {
        code: "0997",
        name: "阿克苏",
        pinyin: "Akesu",
        label: "Akesu0997",
        rank: "A",
        firstchar: "a"
      },
      {
        code: "0837",
        name: "阿坝",
        pinyin: "Aba",
        label: "Aba0837",
        rank: "A",
        firstchar: "a"
      },
      {
        code: "0483",
        name: "阿拉善盟",
        pinyin: "Alashanmeng",
        label: "Alashanmeng0483",
        rank: "A",
        firstchar: "a"
      },
      {
        code: "0906",
        name: "阿勒泰",
        pinyin: "Aletai",
        label: "Aletai0906",
        rank: "A",
        firstchar: "a"
      },
      {
        code: "010",
        name: "北京",
        pinyin: "Beijing",
        label: "Beijing010",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0436",
        name: "白城",
        pinyin: "Baicheng",
        label: "Baicheng0436",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0776",
        name: "百色",
        pinyin: "Baise",
        label: "Baise0776",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0439",
        name: "白山",
        pinyin: "Baishan",
        label: "Baishan0439",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0943",
        name: "白银",
        pinyin: "Baiyin",
        label: "Baiyin0943",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0552",
        name: "蚌埠",
        pinyin: "Bangbu",
        label: "Bangbu0552",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0312",
        name: "保定",
        pinyin: "Baoding",
        label: "Baoding0312",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0917",
        name: "宝鸡",
        pinyin: "Baoji",
        label: "Baoji0917",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0875",
        name: "保山",
        pinyin: "Baoshan",
        label: "Baoshan0875",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0472",
        name: "包头",
        pinyin: "Baotou",
        label: "Baotou0472",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0478",
        name: "巴彦淖尔",
        pinyin: "Bayannaoer",
        label: "Bayannaoer0478",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0996",
        name: "巴音郭楞",
        pinyin: "Bayinguoleng",
        label: "Bayinguoleng09",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0827",
        name: "巴中",
        pinyin: "Bazhong",
        label: "Bazhong0827",
        rank: "B",
        firstchar: "b"
      },
      {
        code: "0871",
        name: "呈贡",
        pinyin: "Chenggong",
        label: "Chenggong0871",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "023",
        name: "城口",
        pinyin: "Chengkou",
        label: "Chengkou023",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0530",
        name: "成武",
        pinyin: "Chengwu",
        label: "Chengwu0530",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0635",
        name: "茌平",
        pinyin: "Chiping",
        label: "Chiping0635",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0794",
        name: "崇仁",
        pinyin: "Chongren",
        label: "Chongren0794",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0797",
        name: "崇义",
        pinyin: "Chongyi",
        label: "Chongyi0797",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "028",
        name: "崇州",
        pinyin: "Chongzhou",
        label: "Chongzhou028",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0571",
        name: "淳安",
        pinyin: "Chunan",
        label: "Chunan0571",
        rank: "C",
        firstchar: "c"
      },
      {
        code: "0459",
        name: "大庆",
        pinyin: "Daqing",
        label: "Daqing0459",
        rank: "D",
        firstchar: "d"
      },
      {
        code: "0352",
        name: "大同",
        pinyin: "Datong",
        label: "Datong0352",
        rank: "D",
        firstchar: "d"
      },
      {
        code: "0457",
        name: "大兴安岭",
        pinyin: "Daxinganling",
        label: "Daxinganling0457",
        rank: "D",
        firstchar: "d"
      },
      {
        code: "0818",
        name: "达州",
        pinyin: "Dazhou",
        label: "Dazhou0818",
        rank: "D",
        firstchar: "d"
      },
      {
        code: "0711",
        name: "鄂州",
        pinyin: "Ezhou",
        label: "Ezhou0711",
        rank: "E",
        firstchar: "e"
      },
      {
        code: "0750",
        name: "恩平",
        pinyin: "Enping",
        label: "Enping0750",
        rank: "E",
        firstchar: "e"
      },
      {
        code: "0413",
        name: "抚顺",
        pinyin: "Fushun",
        label: "Fushun0413",
        rank: "F",
        firstchar: "f"
      },
      {
        code: "0757",
        name: "佛山",
        pinyin: "Foshan",
        label: "Foshan0757",
        rank: "F",
        firstchar: "f"
      },
      {
        code: "0591",
        name: "福州",
        pinyin: "Fuzhou",
        label: "Fuzhou0591",
        rank: "F",
        firstchar: "f"
      },
      {
        code: "0770",
        name: "防城港",
        pinyin: "Fangchenggang",
        label: "Fangchenggang0770",
        rank: "F",
        firstchar: "f"
      },
      {
        code: "0941",
        name: "甘南",
        pinyin: "Gannan",
        label: "Gannan0941",
        rank: "G",
        firstchar: "g"
      },
      {
        code: "020",
        name: "广州",
        pinyin: "Guangzhou",
        label: "Guangzhou020",
        rank: "G",
        firstchar: "g"
      },
      {
        code: "0851",
        name: "贵阳",
        pinyin: "Guiyang",
        label: "Guiyang0851",
        rank: "G",
        firstchar: "g"
      },
      {
        code: "0970",
        name: "海北",
        pinyin: "Haibei",
        label: "Haibei0970",
        rank: "H",
        firstchar: "h"
      },
      {
        code: "0451",
        name: "哈尔滨",
        pinyin: "Haerbin",
        label: "Haerbin0451",
        rank: "H",
        firstchar: "h"
      },
      {
        code: "0573",
        name: "嘉兴",
        pinyin: "Jiaxing",
        label: "Jiaxing0573",
        rank: "J",
        firstchar: "j"
      },
      {
        code: "0423",
        name: "吉林",
        pinyin: "Jilin",
        label: "Jilin0423",
        rank: "J",
        firstchar: "j"
      },
      {
        code: "0378",
        name: "开封",
        pinyin: "Kaifeng",
        label: "Kaifeng0378",
        rank: "K",
        firstchar: "k"
      },
      {
        code: "0871",
        name: "昆明",
        pinyin: "Kunming",
        label: "Kunming0871",
        rank: "K",
        firstchar: "k"
      },
      {
        code: "0931",
        name: "兰州",
        pinyin: "Lanzhou",
        label: "Lanzhou0931",
        rank: "L",
        firstchar: "l"
      },
      {
        code: "0550",
        name: "明光",
        pinyin: "Mingguang",
        label: "Mingguang0550",
        rank: "M",
        firstchar: "m"
      },
      {
        code: "0598",
        name: "明溪",
        pinyin: "Mingxi",
        label: "Mingxi0598",
        rank: "M",
        firstchar: "m"
      }
    ];
    var obj = {};
    data.forEach((item, index) => {
      if (!obj[item.firstchar.toUpperCase()]) {
        obj[item.firstchar.toUpperCase()] = [];
      }
      obj[item.firstchar.toUpperCase()].push(item);
     
      this.objcity = obj;
    });
    /**
     * 数组也是一种对象
     * arr----{
     *      1:a,
     *      2:b,
     *      3:c
     * }
     * arr[index]
     * obj[index] === obj.index
     */
   for(var index in arr){
       console.log(index)
   }
   for(var index in obj){
       console.log(obj[index])
   }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/changecity/categroy.scss";
</style>
